<!--
 * @FileDescription 首页
 * @Author lz
 * @Date 20230117 15:03:05
 * @LastEditors lz
 * @LastEditTime 20230117 15:03:05
-->
<template>
    <!-- <div @click="handleClick('register')">首页</div> -->
    <div class="wp" v-show="HomeContent.Default.showType.value">
        <!-- 顶部 -->
        <hdrModel Hierarchy="3" :ID="0"></hdrModel>
        <div class="title">模式选择</div>
        <div class="b_img"></div>
        <div class="modular Box_j">
            <div class="classificationBox" @click="handleClick('CategoryMenu', 1)">
                <img src="/images/jgrz.png" class="classBox_img">
                仿真教学
            </div>
            <!-- <div class="classificationBox" @click="handleClick('installMenu', 0)">
                                    <img src="/images/lljx.png" class="classBox_img">
                                    安装教学
                                </div> -->
        </div>
        <div class="modular Box_x">
            <div class="classificationBox" @click="handleClick('CategoryMenu', 2)">
                <img src="/images/fzxl.png" class="classBox_img">
                仿真训练
            </div>
            <!-- <div class="classificationBox">
                                    <img src="/images/llxl.png" class="classBox_img">
                                    理论训练
                                </div> -->
        </div>
        <div class="modular Box_k">
            <div class="classificationBox" @click="handleClick('CategoryMenu', 3)">
                <img src="/images/fzkh.png" class="classBox_img">
                仿真考核
            </div>
            <!-- <div class="classificationBox">
                                    <img src="/images/llkh.png" class="classBox_img">
                                    理论考核
                                </div> -->
        </div>
        <!-- <div class="JumpButton" @click="handleApolloImitateClick('ApolloImitate', 3)">
            APOLLO
        </div> -->
    </div>
</template>

<script setup lang="ts">

import hdrModel from './header/index.vue'
import { onMounted, ref, nextTick } from 'vue';
import { useRouter } from 'vue-router'
import HomeContent from './HomeContent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import SplashComponent from '@components/Splash/SplashComponent';

const router = useRouter()
function handleApolloImitateClick(name: string, index: number) {
    router.push({ name })
}
async function handleClick(name: string, index: number) {
    console.log('name:', name, 'index:', index);

    //  记录模式
    HomeContent.Default.ModeType.value = index

    await HomeContent.Default.Awake()

    let newData: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrainModeRequest(index))

    console.log('moshixuanze教学训练考核', newData);
    HomeContent.Default.ParallelDriving.value = newData
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '数据模块初始化'
        HomeContent.Default.ProgressVal.value = 40
    }, 1500);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '后处理模块初始化'
        HomeContent.Default.ProgressVal.value = 25
    }, 2000);
    HomeContent.Default.TypeStatus.value = true


    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '产品初始化'
        HomeContent.Default.ProgressVal.value = 0
    }, 2600);
    setTimeout(async () => {
        HomeContent.Default.Loaded.value = false;
    }, 3000);
    await router.push({ name })
}
async function PlatformTaskInitiation() {
    // await HomeContent.Default.Awake()

    //  记录模式（让模式都为考核模式）
    HomeContent.Default.ModeType.value = 3

    await HomeContent.Default.Awake()

    let newData: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrainModeRequest(3))

    console.log('moshixuanze教学训练考核', newData);
    HomeContent.Default.ParallelDriving.value = newData
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '数据模块初始化'
        HomeContent.Default.ProgressVal.value = 40
    }, 1500);
    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '后处理模块初始化'
        HomeContent.Default.ProgressVal.value = 25
    }, 2000);
    HomeContent.Default.TypeStatus.value = true


    setTimeout(async () => {
        HomeContent.Default.ProgressText.value = '产品初始化'
        HomeContent.Default.ProgressVal.value = 0
    }, 2600);
    setTimeout(async () => {
        HomeContent.Default.Loaded.value = false;
    }, 3000);

    let newData1: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithDriveModeRequest(HomeContent.Default.FaultPointCollection.value))
    console.log('=============================================', newData1);
    HomeContent.Default.MenuList.value = newData1
    HomeContent.Default.TypeStatus.value = true
    console.log(HomeContent.Default.FaultPointCollection.value);

    HomeContent.Default.ProgressText.value = '数据资源初始化'
    HomeContent.Default.ProgressVal.value = 90

    HomeContent.Default.Loaded.value = true
    if (HomeContent.Default.FaultPointCollection.value == '遥控驾驶') {
        await router.push('MenuIndex')
    } else if (HomeContent.Default.FaultPointCollection.value == '循迹驾驶') {
        await router.push('TrackMenu')
    } else if (HomeContent.Default.FaultPointCollection.value == '远程驾驶') {
        await router.push('PracticalDriving')
    } else if (HomeContent.Default.FaultPointCollection.value == '无人驾驶') {
        await router.push('Driverless')
    }

}
onMounted(async function () {
    console.log('启动界面');
    await SplashComponent.Default.InitializeAsync()
    // if (HomeContent.Default.CacheFullData.value.FaultPointCollection) {
    // if (HomeContent.Default.CacheFullData.value) {
    if (HomeContent.Default.FaultPoints.value) {
        PlatformTaskInitiation();
    } else {
        console.log('没有故障点数据');
        HomeContent.Default.showType.value = true
    }
    // if (HomeContent.Default.CacheFullData.value) {
    //     if (HomeContent.Default.CacheFullData.value.FaultPointCollection) {
    //         console.log('平台开始任务启动');
    //        PlatformTaskInitiation();// 只有开始任务启动才走这个
    //     } else {
    //         console.log('平台运行启动');
    //         HomeContent.Default.showType.value = true
    //     }
    // } else {
    //     console.log('没有故障点数据，本地启动');
    //     HomeContent.Default.showType.value = true
    // }
});

</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background-image: url('/images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.title {
    position: absolute;
    top: 128px;
    left: 835px;
    text-align: center;
    font-size: 66px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #FFFFFF;
}

.modular {
    padding-top: 19px;
    position: absolute;
    width: 386px;
    height: 628px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Box_j {
    top: 324px;
    left: 300px;
    background-image: url('/images/j.png');
}

.Box_x {
    top: 324px;
    left: 767px;
    background-image: url('/images/x.png');
}

.Box_k {
    top: 324px;
    right: 300px;
    background-image: url('/images/k.png');
}

.b_img {
    position: absolute;
    width: 1296px;
    height: 225px;
    bottom: 41px;
    right: 309px;
    background-image: url('/images/bg_b.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.classificationBox {
    margin: 20px auto;
    width: 227px;
    height: 77px;
    line-height: 77px;
    text-align: right;
    padding-right: 19px;
    font-size: 32px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #FFFFFF;
    background-image: url('/images/bg_btn.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    transition: background-image .3s;
}

.classificationBox:hover {
    background-image: url('/images/bg_btn_sel.png');
}

.classBox_img {
    position: absolute;
    left: 16px;
    top: 10px;
    width: 53px;
    height: 55px;
}

.JumpButton {
    position: absolute;
    top: 80px;
    right: 80px;
    width: 220px;
    height: 59px;
    line-height: 56px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    background-color: #2A415C;
    border-radius: 29px;
}
</style>